<template>
  <div style="display: flex; flex-direction: column">
    <div class="title"><strong style="margin-left: 30px; color: white">我的已办工作项【0】</strong></div>
    <a-table :columns="columns" :data-source="data" :scroll="{ y: 130 }" size="small" pagination="false" style="width: 620px; height: 180px">
      <template #bodyCell="{ record, column, text }">
        <template v-if="column.dataIndex === 'age'">
          <a @click="caozuoClick(record)">{{ text }}</a>
        </template>
      </template>
      <template v-slot:pagination></template>
    </a-table>
  </div>

</template>

<script setup lang="ts">
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'name',
      width: 50,
      align: 'center',
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'age',
      width: 200,
      align: 'center',
    },
    {
      title: '阶段',
      dataIndex: 'name',
      key: 'address 1',
      ellipsis: true,
      width: 200,
      align: 'center',
    },
    {
      title: '开始时间',
      dataIndex: 'name',
      key: 'address 2',
      ellipsis: true,
      width: 100,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'age',
      key: 'address 3',
      width: 50,
      ellipsis: true,
      align: 'center',
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake ',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 2 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park,',
      tags: ['cool', 'teacher'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park,',
      tags: ['cool', 'teacher'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park,',
      tags: ['cool', 'teacher'],
    },
  ];
  function caozuoClick(c) {
    console.log('操作按钮被点击了,columns', c);
  }
</script>



<style scoped lang="less">
  .title{
    width: 620px;
    height: 25px;
    background-color: cornflowerblue;
  }
</style>
